import React from 'react';

/**
 * 研究一下setState在碰到setTimeOut时的行为
 */
class SetStateSetTimeOut extends React.Component {

    state = {
        x: 0,
        y: 0,
        z: 0
    }

    onClickHandler = () => {
        this.setState({
            x: this.state.x + 1
        })

        this.setState({
            y: this.state.y + 1
        })
        //上面两个setState会被合并为一次更新

        //setTimeout本身就是异步的，所以会单独占用一次更新

        setTimeout(() => {
            this.setState({
                z: this.state.z + 1
            })
        }, 100)
    }


    render() {
        console.log("render")
        return (
            <>
                <div>
                    x:{this.state.x}
                    y:{this.state.y}
                    z:{this.state.z}
                </div>
                <button onClick={this.onClickHandler}>
                    click handler
                </button>
            </>
        )
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('prevProps', prevProps)
    }
}

export default SetStateSetTimeOut;